<template>
  <span v-html="svg" class='jsonToSvg' :style="{width:width+'px',height:height+'px'}"></span>
</template>
<script>
import geojson2svg from "geojson-to-svg";
import { transform } from "ol/proj";

export default {
  props: {
    geoJson: {
        type:String,
        default:null
    },
    stroke: {
      type: String,
      default: "#007aff",
    },
    fill: {
      type: String,
      default: "rgba(60,60,60,0.1)",
    },
    strokeWidth: {
      type: Number,
      default: 3,
    },
    width: {
      type: Number,
      default: 50,
    },
    height: {
      type: Number,
      default: 50,
    },
  },
  data() {
    return {
      svgPath: null,
    };
  },
  computed: {
    svg() {
      if (this.geoJson == null) {
        return null;
      }
      var geomObject = JSON.parse(this.geoJson);
      var coordinates = geomObject; // geomObject.coordinates[0];
      var tempCoordinates = [];
      for (var i = 0; i < coordinates.length; i++) {
        var point = coordinates[i];
        var transPoint = transform(point, "EPSG:4326", "EPSG:3857");
        tempCoordinates.push(transPoint);
      }

console.log("tempCoordinates>>>>>>>>>")
console.log(tempCoordinates)

      

      var theGeoJson = {
        type:"Polygon",
        coordinates:[tempCoordinates]
      }

      var svg = geojson2svg()
        .styles({
          Polygon: {
            fill: this.fill,
            stroke: this.stroke,
            strokeWidth: this.strokeWidth,
          },
        })
        .data({
          type: "Feature",
          properties: { type: "myType" },
          geometry: theGeoJson,
        })
        .render();

        var style=" style='transform: rotateX(180deg);width:100%;height:100%;' ";

        var result =   this.insertStr(svg,4,style); 
        console.log(result)
        return result;
    },
  },
  methods: {
    insertStr(soure, start, newStr){   
        return soure.slice(0, start) + newStr + soure.slice(start);
    }   
  },
};
</script>

<style scoped>
.jsonToSvg{
    display: inline-block;
}
 
</style>
 